<template>
    <div class="home">
        <section class="home-carousel">
            <template>
                <el-carousel class="homepage-carousel" :interval="5000" height="400px">
                    <el-carousel-item v-for="(item, index) in carouselPicData" :key="index">
                        <a :href="item.link_url == '' ? false : item.link_url" :target="item.link_url == '' ? '_Self' : '_Blank'"><img v-if="item.picture" :src="BASE_URL + item.picture" /></a>
                    </el-carousel-item>
                </el-carousel>
            </template>
        </section>

        <section class="i_application apps-section maxW">
            <div class="i_applicationTitle home-app-list clear">
                <h3 class="appTitles">应用管理</h3>
            </div>
            <div class="i_applicationBox clear">
                <template v-for="(item, index) of applicationData">
                    <a :key="index" class="i_appList wow rollIn" @click="checkRole(item.url, item.jump_model, item.isdefault, item.id, item.true_url, item.is_new_from)">
                        <div><img v-if="item" :src="BASE_URL + item.logo_path" /></div>
                        <p :class="{ empty: !item }">
                            <span v-if="item">{{ item.name }}</span>
                        </p>
                    </a>
                </template>
                 <router-link class="i_appList wow rollIn" v-if="applicationData.length >= 6" to="/home/app" tag="a">
                    <div><img  src="../../../assets/images/moreApp.png" /></div>
                    <p>
                        <span>更多</span>
                    </p>
                </router-link>
            </div>
        </section>
       

        <section class="home-carousel backgroundImage">
            <section class="i_application maxW">
                <div class="i_applicationTitle clear">
                    <h3 class="appTitles">热门推荐</h3>
                </div>
                <div class="i_hotBox">
                    <ul class="clear" id="hot_video">
                        <template v-for="(item, index) of hotVideoData">
                            <li class="i_hotList wow bounceInLeft fl" v-if="item" :key="index">
                                <a @click="goToDetailPage(item.status_m3u8, item.resid)">
                                    <img v-if="item.picture" :src="BASE_URL + item.picture" :onerror="errorImg" />
                                </a>
                                <a @click="goToDetailPage(item.status_m3u8, item.resid)" class="i_ellipsis" :title="item.video_name">
                                    {{ item.video_name }}
                                </a>
                                <div class="i_hotType clear">
                                    <a @click="goToAppModel('space/resource',item.uid,item.push_code,item.app_code)">
                                        <span><img v-if="item.avatar_path" :src="BASE_URL + item.avatar_path" /></span>
                                        {{ item.user_name }}
                                    </a>
                                    <a href="javascript:;">{{ item.category}}</a>
                                </div>
                                <i v-if="item.is_nice == 1" class="is-nice"></i>
                            </li>
                            <li class="i_hotList wow bounceInLeft fl" v-else :key="index"></li>
                        </template>
                    </ul>
                </div>
            </section>
        </section>

        <section class="i_application maxW">
                <div class="i_applicationTitle clear">
                    <h3 class="appTitles">名师中心</h3>
                </div>
                <div class="famous-teacher">
                    <el-carousel indicator-position="outside" height="180px">
                        <el-carousel-item>
                            <div class="teachers" v-for="(item,index) of teacherCenterData1" @click="goToAppModel('teach/space',item.id,item.push_code,item.app_code)" :key="index">
                                <img  :src="BASE_URL + item.avatar_path" :alt="item.name">
                                <p >{{item.name}}</p>
                            </div>
                        </el-carousel-item>
                        <el-carousel-item>
                            <div class="teachers" v-for="(item,index) of teacherCenterData2" @click="goToAppModel('teach/space',item.id,item.push_code,item.app_code)" :key="index">
                                <img  :src="BASE_URL + item.avatar_path" :alt="item.name">
                                <p >{{item.name}}</p>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="moreTeachers">
                    <el-button @click="goToFamous" size="mini">更多</el-button>
                </div>
        </section>
        <section class="i_application maxW">
                <div class="i_applicationTitle clear">
                    <h3 class="appTitles">新闻公告</h3>
                </div>
                <div class="theNewsBox">
                    <div class="testBox i_scorbar clear" id="news_list">
                        <div class="i_testTab" v-for="(item, index) of newsData" :key="index">
                            <input type="radio" class="i_testRadio" :checked="index == checknews" />
                            <label class="i_testLabel" @click="getNewsList(item.id, index)">{{ item.name }}</label>
                            <div class="i_tabContent">
                                <ul class="ulhNotice">
                                    <template v-for="(item1, index1) of newsListData">
                                        <li v-if="item1" class="hNotice clear" :key="index1">
                                            <template v-if="index1 == 0">
                                                <img :src="BASE_URL + item1.picture" alt="">
                                                <div class="newsInfo1">
                                                    <!-- item1.update_time -->
                                                    <div class="data1">
                                                        <h4 class="date_day1">{{getNewsDay(item1.update_time)}}</h4>
                                                        <p class="date_yue1">{{getNewsDate(item1.update_time)}}</p>
                                                    </div>
                                                    <router-link :to="{ path: '/home/newsDetail', query: { id: item1.id } }" tag="div" class="nesDetail1">
                                                        <h4 class="detailName1">{{item1.name}}</h4>
                                                        <p class="detailContent1" v-html="getHtml(item1.content)"></p>
                                                    </router-link>
                                                </div>
                                            </template>
                                            <template v-if="index1 != 0">
                                                <div class="data2">
                                                    <h4 class="date_day2">{{getNewsDay(item1.update_time)}}</h4>
                                                    <p class="date_yue2">{{getNewsDate(item1.update_time)}}</p>
                                                </div>
                                                <router-link :to="{ path: '/home/newsDetail', query: { id: item1.id } }" tag="div" class="nesDetail2">
                                                    <h4 class="detailName2">{{item1.name}}</h4>
                                                    <p class="detailContent2" v-html="getHtml(item1.content)"></p>
                                                </router-link>
                                            </template>
                                        </li>
                                    </template>
                                </ul>
                            </div>
                        </div>
                        <router-link to="/home/newsList" class="i_testTab" tag="div">
                            <label class="i_testLabel">更多</label>
                        </router-link>
                    </div>
                </div>
        </section>
        <section class="i_application maxW">
            <div class="i_applicationTitle">
                <h3 class="appTitles">{{ CampusStyleData.name }}</h3>
            </div>
            <div class="gantDemeanor">
                <div class="companyImg"><img v-if="CampusStyleData.picture" :src="BASE_URL + CampusStyleData.picture" /></div>
                <div class="companyProfile">
                    <p class="profileTxt" v-html="CampusStyleData.content"></p>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import resourceRow from '../base/resource-row'
export default {
	components: {
		resourceRow
	},    
    props: {
        pathOption: {
            personal: '', //个人中心跳转路径
            manage: '' //后台跳转路径
        }
    },
    data() {
        return {
            userId: this.$g.user_id,
            carouselPicData: [],
            applicationData: [],
            hotVideoData: [],
            errorImg: 'this.src="' + require('../../../assets/images/image_loding.png') + '"',
            teacherCenterData1: [],
            teacherCenterData2: [],
            newsData: [],
            newsListData: [],
            newsActiveName: '0',
            checknews: 0,
            CampusStyleData: [],
            hostURL:"",
            resourceData: [],
            openclassData: [],
        };
    },
    created() {
		this.hostURL = sessionStorage.getItem('host_addr');
        this.getCarouselPic();
        this.appList();
        this.hotVideo();
        this.teacherCenter();
        this.news();
        this.CampusStyle();
    },
    computed: {
        CheckSchoolAppCode(){
            let code = sessionStorage.getItem('CheckSchoolAppCode');
            return code ? code : '00000000000000000000000000000000';
        },
        isSchool(){
            return this.$store.getters.isSchool;
        },
    },
    methods: {
        //轮播图
        getCarouselPic() {
            let success = res => {
                this.carouselPicData = res.data;
            };
            this.$ajax({
                url: 'api/carousel/banners',
                method: 'get',
                params: {},
                func: {
                    success: success
                }
            });
        },
        // 应用管理
        appList() {
            let success = res => {
                if(res.data.length > 6) {
                    this.applicationData = new Array(6);
                }else{
                    this.applicationData = new Array(res.data.length);
                }
                res.data.forEach((item, idx) => {
                    this.applicationData[idx] = res.data[idx];
                });
            };
            this.$ajax({
                url: 'api/app/app_list',
                method: 'get',
                params: {
                    page_index: 1,
                    page_size: 6,
                    order_type: 'click',
                    status: 1,
                    select_type: 1,
                },
                func: {
                    success: success
                }
            });
        },
        /**  应用图标的点击事件
         * @param url 前台应用跳转地址
         * @param jumpModel '跳转方式 1：直接跳转（本平台以内的）  2验证跳转（参考跳转到前台） 3（验证跳转到个人中心） 4 直接跳转（本平台以外的）'
         * @param isDefault 是否是默认应用 1：是；0：不是（注默认应用不验证权限，登录 除对话，发评论等需登录的功能外）
         * @param id 应用id
         * @param trueUrl 其他系统模块应用跳转地址
         * @param isNewFrom 0：当前窗口打开；1：新窗口打开
         */
        checkRole(url, jumpModel, isDefault, id, trueUrl, isNewFrom) {
            if (url == '') {
                this.$message.error('该功能暂未开放！');
                return;
            }
            if (isDefault != 1) {
                if (this.userId == 0) {
                    this.$message.error('该功能需要登录后才能使用！');
                    return;
                }
                if (!is_empty(this.$store.getters.userInfo) && this.$store.getters.userInfo.role.indexOf(7) > -1) {
                    this.$message.error('游客无权进入！');
                    return;
                }
                this.checkNode(url, jumpModel, isDefault, id, trueUrl, isNewFrom);
            } else {
                this.addAppVisitRecord(id);
                if (jumpModel == 1 || jumpModel == 2) {
                    switch (url) {
                        case '/index/resource/index':
                            url = 'home/resourceList';
                            break;
                        case 'live':
                            url = 'home/liveList';
                            break;
                        case 'album':
                            url = 'home/albumList';
                            break;
                        case 'openclass':
                            url = 'home/openclassList';
                            break;
                        case 'teachcenter':
                            url = 'teach';
                            break;
                        case 'email':
                            url = 'email/inbox';
                            break;
                        case 'ask':
                            url = 'teach/ask';
                            break;
                    }
                    if (isNewFrom == 0) {
                        this.$router.push({
                            path: '/' + url,
                            query: { CheckSchoolAppCode: this.CheckSchoolAppCode }
                        });
                    } else {
                        const { href } = this.$router.resolve({
                            path: '/' + url,
                            query: {
                                CheckSchoolAppCode: this.CheckSchoolAppCode
                            }
                        });
                        window.open(href, '_blank');
                    }
                }
                // 跳个人中心
                else if (jumpModel == 3) {
                    let urlString = this.pathOption.personal + '&routerUrl=' + url;
                    isNewFrom == 0 ? (window.location.href = urlString) : window.open(urlString, '_blank');
                }
                //跳其他系统模块
                else if (jumpModel == 4) {
                    if (trueUrl == '' || trueUrl == null || trueUrl == false) {
                        this.$message.error('该功能暂未开放！');
                        return;
                    }
                    isNewFrom == 0 ? (window.location.href = url) : window.open(url, '_blank');
                }
            }
        },
        // 检验跳转权限
        checkNode(url, jumpModel, isDefault, id, trueUrl, isNewFrom) {
            let success = res => {
                this.addAppVisitRecord(id);
                // 跳前台
                if (jumpModel == 1 || jumpModel == 2) {
                    switch (url) {
                        case '/index/resource/index':
                            url = 'home/resourceList';
                            break;
                        case 'live':
                            url = 'home/liveList';
                            break;
                        case 'album':
                            url = 'home/albumList';
                            break;
                        case 'openclass':
                            url = 'home/openclassList';
                            break;
                        case 'teachcenter':
                            url = 'teach';
                            break;
                        case 'email':
                            url = 'email/inbox';
                            break;
                        case 'ask':
                            url = 'teach/ask';
                            break;
                    }
                    if (isNewFrom == 0) {
                        this.$router.push({
                            path: '/' + url,
                            query: { CheckSchoolAppCode: this.CheckSchoolAppCode }
                        });
                    } else {
                        const { href } = this.$router.resolve({
                            path: '/' + url,
                            query: {
                                CheckSchoolAppCode: this.CheckSchoolAppCode
                            }
                        });
                        window.open(href, '_blank');
                    }
                }
                // 跳个人中心
                else if (jumpModel == 3) {
                    let urlString = this.pathOption.personal + '&routerUrl=' + url;
                    isNewFrom == 0 ? (window.location.href = urlString) : window.open(urlString, '_blank');
                }
                //跳其他系统模块
                else if (jumpModel == 4) {
                    if (trueUrl == '' || trueUrl == null || trueUrl == false) {
                        this.$message.error('该功能暂未开放！');
                        return;
                    }
                    isNewFrom == 0 ? (window.location.href = url) : window.open(url, '_blank');
                }
            };
            this.$ajax.get('/api/login/checkthisnode', {
                params: {
                    url: url,
                    token: localStorage.getItem('logintoken'),
                    checkschoolappcode: this.CheckSchoolAppCode
                },
                func: { success: success }
            });
        },
        /** 添加应用访问记录
         * @param id 应用id
         */
        addAppVisitRecord(id) {
            let success = res => {};
            this.$ajax({
                url: '/api/app/add_app_visit_record',
                method: 'post',
                data: {
                    app_id: id
                },
                func: {
                    success: success
                }
            });
        },
        // 热门推荐
        hotVideo() {
            this.hotVideoData = [];
            let success = res => {
                // 数据不够8个的话，给空的，为了在模板遍历的时候够8次，显示占位符效果
                this.hotVideoData = new Array(8);
                for (let inx in res.data) {
                    this.hotVideoData[inx - 1] = res.data[inx];
                }
            };
            this.$ajax({
                url: 'api/video/get_home_position_video',
                method: 'get',
                params: {
                    page_index: 1,
                    page_size: 8,
                    order_type: 'click'
                },
                func: {
                    success: success
                }
            });
        },

        // 名师中心：
        teacherCenter() {
            this.teacherCenterData1 = []
            this.teacherCenterData2 = []
            let success = res => {

                if(res.data.length > 6){
                    res.data.forEach((item,index) =>{
                        if(index <= 5){
                            this.teacherCenterData1.push(res.data[index]) 
                        }else{
                            this.teacherCenterData2.push(res.data[index]) 
                        }
                    })
                }else{
                    res.data.forEach((item,index) =>{
                        this.teacherCenterData1.push(res.data[index]) 
                    })
                }

            };
            this.$ajax({
                url: 'api/user/index_master',
                method: 'get',
                params: {
                    page_index: 1,
                    page_size: 12,
                    is_famous: 1,
                    status: 1
                },
                func: {
                    success: success
                }
            });
        },
        goToFamous() {
            this.$router.push({path: '/teach'})
        },

        // 获取新闻公告标题：
        news() {
            let success = res => {
                this.newsData = res.data;
                if(!is_empty(res.data)){
                  this.getNewsList(res.data[0].id, 0);
                }
            };
            this.$ajax({
                url: 'api/news/news_category',
                method: 'get',
                params: {
                    page_index: 1,
                    page_size: 3
                },
                func: {
                    success: success
                }
            });
        },
        // 获取新闻公告标题id对应的列表：
        getNewsList(_id, _index) {
            this.checknews = _index;
            let success = res => {
                this.newsListData = new Array(4);
                res.data.data.forEach((item, inx) => {
                    this.newsListData[inx] = res.data.data[inx];
                });
            };
            this.$ajax({
                url: 'api/news/news_list',
                method: 'get',
                params: {
                    page_index: 1,
                    page_size: 4,
                    category_id: _id,
                    order: 'sort'
                },
                func: {
                    success: success
                }
            });
        },
        getNewsDay(date) {
            let str = date.split(' ')[0]
            return str.slice(str.lastIndexOf('-')+1)
        },
        getNewsDate(date) {
            let str = date.split(' ')[0]
            return str.slice(0, str.lastIndexOf('-'))
        },
        getHtml(value) {
            let reg = /<img[^>]*src[=\"\'\s]+[^\.]*\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi
            let str = value.replace(reg, '')
            return str
        },
        // 校园风采：
        CampusStyle() {
            let success = res => {
                this.CampusStyleData = res.data;
            };
            this.$ajax({
                url: 'api/setting/school_culture',
                method: 'get',
                params: {},
                func: {
                    success: success
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
    .home {
        // background-color: #fff;
        .appTitles {
            padding: 18px 0 25px 0;
            text-align: center;
            line-height: 43px;
            height: 43px;
            font-size: 32px;
            font-family: MicrosoftYaHeiSemibold;
            color: #29292A;
        }
        .backgroundImage {
            background: url('../../../assets/images/hotVideoBackgrounImage.png') no-repeat;
            background-size: 100% 64%;
            background-position: bottom;
        }
        .famous-teacher {
            padding-top: 10px;
            height: 180px;
            margin-bottom: 48px;

            .el-carousel__item h3 {
                // color: #475669;
                font-size: 18px;
                opacity: 0.75;
                line-height: 300px;
                margin: 0;
            }
            .el-carousel__button {
                height: 4px;
            }
            .el-carousel__item {
                display: flex;
                justify-content: space-around;
                align-items: center;
                // background-color: #fff;
                .teachers {
                    width: 94px;
                    height: 140px;
                    cursor: pointer;
                    img {
                        width: 94px;
                        height: 94px;
                        border-radius: 50%;
                    }
                    p {
                        padding-top: 20px;
                        height: 24px;
                        font-size: 18px;
                        font-family: MicrosoftYaHei;
                        color: #020202;
                        line-height: 24px;
                        width: 100%;
                        text-align: center;
                        white-space:nowrap; 
                        overflow:hidden; 
                        text-overflow:ellipsis;
                    }
                }
            }
        }
        .moreTeachers {
            text-align: center;
            .el-button {
                color: #fff;
                background: #273252;
                width: 70px;
                // height: 28px;
                border-radius: 2px;
                // line-height: 28px;
            }
        }
        .theNewsBox {
            height: 350px;
            .testBox {
                width: 100%;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;

                .i_testTab {
                    height: 29px;
                    background-color: #EEF1F5;
                }
                .i_testTab+.i_testTab {
                    margin-left: 10px;
                }

                .i_testLabel {
                    display: block;
                    padding: 5px 8px;
                    font-size: 14px;
                    color: #666666;
                    line-height: 19px;
                    cursor: pointer;

                    &:hover {
                        color: #666666;
                    }
                }

                .i_testRadio,
                .i_tabContent {
                    position: absolute;
                    left: -999rem;
                }

                .i_testRadio:checked~.i_tabContent {
                    left: 0;
                    right: 0;
                }

                .i_testRadio:checked~.i_testLabel {
                    background: #273252;
                    -moz-border-radius: 2px;
                    border-radius: 2px;
                    position: relative;
                    z-index: 1;
                    color: #ffffff;
                    margin-bottom: 20px;
                }
                .ulhNotice {
                    
                    display: flex;
                    li {
                        height: 306px;
                        background-color: #EEF1F5;
                    }
                    li+li {
                        margin-left: 21px;
                    }
                    .hNotice:nth-child(1) {
                        width: 438px;
                        img {
                            width: 100%;
                            height: 234px;
                        }
                        .newsInfo1 {
                            display: flex;
                            .data1 {
                                background-color: #273252;
                                width: 72px;
                                height: 72px;
                                color: #fff;
                                .date_day1 {
                                    height: 32px;
                                    padding-top: 7px;
                                    font-size: 24px;
                                    line-height: 32px;
                                    text-align: center;
                                    font-weight: bold;
                                    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
                                }
                                .date_yue1 {
                                    text-align: center;
                                    font-size: 16px;
                                    font-family: MicrosoftYaHei;
                                    line-height: 21px;
                                }
                            }
                            .nesDetail1 {
                                width: 366px;
                                height: 72px;
                                padding: 13px 24px 0 24px;
                                box-sizing: border-box;
                                cursor: pointer;
                                .detailName1 {
                                    font-weight: 700;
                                    font-size: 16px;
                                    height: 21px;
                                    line-height: 21px;
                                    white-space:nowrap; 
                                    overflow:hidden; 
                                    text-overflow:ellipsis;
                                    font-family: MicrosoftYaHeiSemibold;
                                    margin-bottom: 6px;
                                }
                                .detailContent1 {
                                    white-space:nowrap; 
                                    overflow:hidden; 
                                    text-overflow:ellipsis;
                                    height: 19px;
                                    font-size: 14px;
                                    font-family: MicrosoftYaHei;
                                    color: #A8AAAE;
                                    line-height: 19px;
                                }
                            }
                        }
                    }
                    .hNotice {
                        border: solid 1px #e5e5e5;
                        width: 230px;
                        .data2 {
                            padding: 42px 14px 0 14px;
                            box-sizing: border-box;
                            color: #A8AAAE;
                            .date_day2 {
                                font-size: 24px;
                                line-height: 40px;
                                font-weight: bold;
                                font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
                            }
                            .date_yue2 {
                                font-size: 16px;
                                font-family: MicrosoftYaHei;
                                line-height: 25px;
                            }
                        }
                        .nesDetail2 {
                            padding: 24px 14px 0 14px;
                            box-sizing: border-box;
                            cursor: pointer;
                            .detailName2 {
                                font-size: 16px;
                                line-height: 40px;
                                white-space:nowrap; 
                                overflow:hidden; 
                                text-overflow:ellipsis;
                                font-family: MicrosoftYaHeiSemibold;
                                font-weight: 700;
                                color: #29292A;
                            }
                            .detailContent2 {
                                font-size: 14px;
                                overflow: hidden; 
                                text-overflow: ellipsis; 
                                display: -webkit-box; 
                                -webkit-line-clamp: 3; 
                                -webkit-box-orient: vertical;
                                line-height: 24px;
                                font-family: MicrosoftYaHei;
                                color: #A8AAAE;
                            }
                        }
                    }
                }
            }
        }
        .gantDemeanor {
            height: 250px;
            padding-bottom: 20px;
            background: url('../../../assets/images/schoolDetail.png') no-repeat;
            display: flex;
            .companyImg {
                width: 330px;
                height: 220px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .companyProfile {
                padding: 48px 40px 60px 40px;
                box-sizing: border-box;
                width: 870px;
                height: 220px;
                .profileTxt {
                    text-indent: 2rem;
                    width: 774px;
                    height: 125px;
                    overflow: auto;
                    line-height: 21px;
                    /deep/ span {
                        color: #fff !important;
                    }
                }
            }
        }
    }
</style>